<template>
 <div class="swiper">
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <!-- Indicators -->
     <ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
       <li data-target="#carousel-example-generic" data-slide-to="1"></li>
       <li data-target="#carousel-example-generic" data-slide-to="2"></li>
     </ol>

     <!-- Wrapper for slides -->
     <div class="carousel-inner" role="listbox">

       <div class="item active">
         <img src="https://blog.dbsgw.com/content/templates/Fys/images/random/1.jpg" alt="022">
       </div>
       <div class="item">
         <img src="https://blog.dbsgw.com/content/templates/Fys/images/random/9.jpg" alt="33">
       </div>
       <div class="item">
         <img src="https://blog.dbsgw.com/content/templates/Fys/images/random/9.jpg" alt="33">
       </div>

     </div>

     <!-- Controls -->
     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
       <span class="sr-only">Previous</span>
     </a>
     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
       <span class="sr-only">Next</span>
     </a>
   </div>
 </div>


</template>

<script>
    export default {
        name: "swiper",
      data() {
        return {
          list: [],
        };
      },
      created() {
        this.$axios
          .$get("/api/web/focus")
          .then(con => {
           this.list = con
          });
      }
    }
</script>

<style lang="less" scoped>
.swiper{
  margin-top: 20px;
  margin-right: 10px;
}


// 最大 768px
@media (max-width: 768px) {
  .swiper{
    margin-top: 0;
  }
}

// 最小 768px  到  最大 922px
@media (min-width: 768px) and (max-width: 992px) {
  .swiper{
    margin-top: 0;
    display: none;
  }
}

// 最小 992px   到 最大 1200px
@media (min-width: 992px) and (max-width: 1200px) {
}

// 最小1200px
@media (min-width: 1200px) {
}
</style>
